<template>
	<view>
		<view class="navigation-bar-classify-kong"></view>
		<view class="navigation-bar-classify">
			<view class="navigation-bar">
				<view class="balance-box">
					<image src="../../static/Myimg/zuo1.png" @click="returnOne" class="return-a" mode=""></image>
					<view class="balances">
						余额变动明细
					</view>
				</view>
				<image src="../../static/TestImg/kefu.png" class="gefu" mode=""></image>
			</view>
			<view class="balance-classify">
				<u-tabs :list="list1" @click="clickTwo" lineWidth=30 :activeStyle="{color: 'blue',
						fontWeight:'600'}" :current="currenttwo"></u-tabs>
			</view>
		</view>

		<view class="balance-all" v-if="balanceAll">
			<view v-for="(item,index) in all" :key="index" class="all-one">
				<view class="all-image">
					<image :src="item.profilePrcture" mode="" class="all-image-title"></image>
				</view>
				<view class="all-content-box" :class="{ 'with-top-border': index > 0 }">
					<view class="all-name-box">
						<view class="all-name">
							{{item.orderNum}}
						</view>
						<view class="balance-price" v-if="item.balancePrices">
							-{{item.amount}}
						</view>
						<view class="balance-price-imcome" v-if="item.balancePriceImcomeS">
							+{{item.amount}}
						</view>
					</view>
					<view class="all-content-time-box">
						<view class="all-content-time">
							{{item.createdAt}}
						</view>
						<view class="all-content-price">
							余额{{item.balance}}元
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="amount-paid-box" v-if="amountPaid">
			<view v-for="(item,index) in all" :key="index" class="all-one">
				<view class="all-image">
					<image :src="item.profilePrcture" mode="" class="all-image-title"></image>
				</view>
				<view class="all-content-box" :class="{ 'with-top-border': index > 0 }">
					<view class="all-name-box">
						<view class="all-name">
							{{item.orderNum}}
						</view>
						<view class="balance-price">
							-{{item.amount}}
						</view>
					</view>
					<view class="all-content-time-box">
						<view class="all-content-time">
							{{item.createdAt}}
						</view>
						<view class="all-content-price">
							余额{{item.balance}}元
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="income-box" v-if="income">
			<view v-for="(item,index) in all" :key="index" class="all-one">
				<view class="all-image">
					<image :src="item.profilePrcture" mode="" class="all-image-title"></image>
				</view>
				<view class="all-content-box" :class="{ 'with-top-border': index > 0 }">
					<view class="all-name-box">
						<view class="all-name">
							{{item.orderNum}}
						</view>
						<view class="balance-price-imcome">
							+{{item.amount}}
						</view>
					</view>
					<view class="all-content-time-box">
						<view class="all-content-time">
							{{item.createdAt}}
						</view>
						<view class="all-content-price">
							余额{{item.balance}}元
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						name: '全部'
					},
					{
						name: '支出'
					},
					{
						name: '收入'
					}
				],
				currenttwo: 0,
				all: [{
					profilePrcture: "",
					orderNum: "",
					amount: 0,
					createdAt: "",
					balance: 0,
					balancePrices: true, // 添加默认值
					balancePriceImcomeS: false, // 添加默认值
				}],
				balanceAll: true,
				amountPaid: false,
				income: false,
				balancePrices: true,
				balancePriceImcomeS: false,
				currentStatus: 0, // 添加一个新的变量来存储当前的 status 值
				status: 0,
			}
		},
		methods: {
			clickTwo(e) {
				this.currenttwo = e.index;
				this.status = e.index;
				if (e.index == 0) { // 全部
					this.balanceAll = true;
					this.amountPaid = false;
					this.income = false;
				} else if (e.index == 1) { // 支出
					this.amountPaid = true;
					this.balanceAll = false;
					this.income = false;
					this.all.forEach(item => {
						item.balancePrices = item.status === 1; // 支出状态下，只显示balancePrices
						item.balancePriceImcomeS = false;
					});
				} else if (e.index == 2) { // 收入
					this.amountPaid = false;
					this.balanceAll = false;
					this.income = true;
					this.all.forEach(item => {
						item.balancePrices = false;
						item.balancePriceImcomeS = item.status === 2; // 收入状态下，只显示balancePriceImcomeS
					});
				}
				this.alltwo(); // 根据选中的标签重新获取数据
			},
			alltwo() {
				let status = this.status; // 使用当前状态
				this.request(`/bills/userbalance?userId=${uni.getStorageSync("id")}&status=${status}`, "get")
					.then(
						(res) => {
							console.log(res);
							this.all = res.data.result;
							console.log(this.all);
							this.all.forEach(item => {
								item.balancePrices = item.status === 1;
								item.balancePriceImcomeS = item.status === 2;
								// 也可以设置 currentStatus 用于后续的处理
								this.currentStatus = item.status;
							});
						}).catch(
						(err) => {
							console.log(err);
						})
			},
			returnOne(){
				uni.navigateBack({
					delta:1
				})
			}
		},

		onLoad() {

			this.alltwo();
		}

	}
</script>

<style scoped>
	page {
		background-color: rgb(245, 245, 245);
	}

	.navigation-bar-classify {
		background-color: white;
		width: 100%;
		margin-bottom: 30rpx;
		position: fixed;
		top: 0rpx;
	}

	.navigation-bar-classify-kong {
		width: 100%;
		height: 200rpx;
	}

	.navigation-bar {
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: end;
		justify-content: space-between;
	}

	.balance-box {
		width: 50%;
		height: 100%;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: end;
	}

	.return-a {
		width: 60rpx;
		height: 60rpx;
		margin-left: 10rpx;
	}

	.balances {
		width: 260rpx;
		height: 60rpx;
		font-size: 36rpx;
		/* background-color: aqua; */
		margin-left: 20rpx;
	}

	.gefu {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.balance-classify {
		width: 100%;
		height: 80rpx;
		/* background-color: aquamarine; */
		display: flex;
		justify-content: space-around;
		/* 添加此行以实现想要的布局 */
	}

	.balance-all,
	.amount-paid-box,
	.income-box {
		width: 95%;
		/* 	display: flex;
		flex-wrap: wrap; */
		margin-left: 2.5%;
		border-radius: 40rpx;
		background-color: white;
	}

	.with-top-border {
		border-top: 1px solid #ccc;
		/* 设置边框颜色和宽度 */
	}

	.all-one {
		width: 100%;
		height: 140rpx;
		/* background-color: white; */
		display: flex;

	}

	.all-image {
		width: 140rpx;
		height: 140rpx;
		/* background-color: aqua; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.all-image-title {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.all-content-box {
		width: 80%;
		height: 100%;
		/* background-color: aqua; */
	}

	.all-name-box {
		width: 100%;
		height: 50%;
		/* background-color: antiquewhite; */
		display: flex;
	}

	.all-name {
		width: 75%;
		height: 100%;
		/* background-color: azure; */
		line-height: 65rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 显示省略号来代表被隐藏的文本 */
	}

	.balance-price,
	.balance-price-imcome {
		width: 25%;
		height: 100%;
		/* background-color: aquamarine; */
		font-weight: 600rpx;
		font-size: 36rpx;
		line-height: 65rpx;
		text-align: center;
	}

	.balance-price-imcome {
		color: red;
	}

	.all-content-time-box {
		width: 100%;
		height: 50%;
		/* background-color: beige; */
		margin-top: 5rpx;
		display: flex;
	}

	.all-content-time {
		width: 60%;
		height: 100%;
		/* background-color: bisque; */
		color: rgb(185, 185, 185);
		font-size: 28rpx;

	}

	.all-content-price {
		width: 37%;
		height: 100%;
		/* background-color: burlywood; */
		text-align: end;
		margin-right: 20rpx;
		color: rgb(185, 185, 185);
		font-size: 28rpx;
	}
</style>